<template>
  <div class="login">
    <van-nav-bar
      title="标题"
    />
  <van-cell-group>
    <van-form validate-first>
    <van-field
      v-model.trim="user.mobile"
      type="tel"
      label="手机号:"
      placeholder="请输入手机号"
      :rules="[{ pattern: /^1(3[0-9]|4[01456789]|5[0-35-9]|6[2567]|7[0-8]|[0-9]|9[0-35-9])\d{8}$/,message: '请输入正确手机号', require:true, trigger:'onBlur' }]"
      />
    <van-field
      v-model.trim="user.code"
      type="password"
      label="验证码:"
      placeholder="请输入验证码"
      :rules="[{ pattern: /246810/, message:'验证码有误', require:true, trigger:'onBlur'}]"
       />
      </van-form>
  </van-cell-group>
  <div class="btn">
    <van-button class="btn-van" type="info" @click="hLogin">登录</van-button>
  </div>
  </div>
</template>

<script>
import { login, getProfile } from '../../api/user.js'
export default {
  data () {
    return {
      user: {
        mobile: '13912345678',
        code: '246810'
      }
    }
  },
  methods: {
    async hLogin () {
      // 获取用户个人资料
      try {
        // 收集用户信息
        console.log(this.user)
        this.$toast.loading({
          duration: 0,
          message: '加载中...',
          overlay: true
        })
        // 发送ajax请求
        const res = await login(this.user.mobile, this.user.code)
        console.log(res)
        this.$toast.success('欢迎' + this.user.mobile)
        this.$store.commit('setuserToken', res.data.data)
        const usersInfo = await getProfile()
        console.log(usersInfo)
        this.$store.commit('usersInfo/mSetuserInfo', usersInfo.data.data)
        // 跳到主页
        this.$router.push('/home')
      } catch (err) {
        this.$toast.fail('登陆失败了')
      }
    }
  }
}
</script>

<style lang="less">
.btn {
  margin-top: 10px;
  padding: 0 20px;
  .btn-van {
   width: 100%;
   background-color: pink;
   color: #fff
  }
}
</style>
